<template>
    <addEditBaseAddressView ref="addEditBaseAddressView" />
    <addFileView ref="addFileView" />
    <el-main>

        <div class="teacher">
            <div class="app-table">
                <div class="app-body">
                    <el-tabs v-model="form.campus" type="card" @tab-change="changeCampus">
                        <el-tab-pane :label="campusName" :name="1">
                            <div class="app-search">
                                <el-form :inline="true" class="demo-form-inline" v-model="form">
                                    <el-form-item label="楼宇">
                                        <el-select v-model="form.parentId" class="m-2" placeholder="请选择楼宇"
                                            @change="selectLou" style="width: 192px;" clearable>
                                            <el-option v-for="item in storeyList" :key="item.id" :label="item.alias"
                                                :value="item.id" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="房间号">
                                        <el-input placeholder="请输入地点名称" v-model="form.name"
                                            @keyup.enter="searchEnter"></el-input>
                                    </el-form-item>
                                    <el-form-item label="地点名称">
                                        <el-input placeholder="请输入别名" v-model="form.alias"
                                            @keyup.enter="searchEnter"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button class="serach_btn" type="primary" @click="onSubmit"
                                            @keyup.enter="searchEnter">搜索</el-button>
                                        <el-button class="add_btn" type="success" @click="add">添加</el-button>
                                        <el-button class="add_btn" type="success" @click="exporthandle">导出地址</el-button>
                                        <!-- <el-button class="add_btn" type="success" @click="importHandle">导入</el-button> -->
                                        <el-upload class="upload-demo" :on-change="handleChange" :auto-upload="false"
                                            style="width: 90px; margin: 0 10px 0;" ref="upload" :show-file-list="false">
                                            <el-button class="add_btn" type="success"
                                                style="width: 90px;">导入地址</el-button>
                                        </el-upload>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <el-table :data="list" style="width: 100%" :row-class-name="tableRowClassName">
                                <el-table-column prop="parentName" label="楼宇" />
                                <el-table-column prop="name" label="房间号" />
                                <el-table-column prop="alias" label="地点名称" />
                                <el-table-column label="操作" width="240px">
                                    <template style="display: block" #default="scope">
                                        <el-button class="edit_btn" size="small" type="success"
                                            @click="editBaseAddress(scope.row)">编辑
                                        </el-button>
                                        <el-button class="del_btn" size="small" type="danger"
                                            @click="deleteBaseAddress(scope.row.id)">删除
                                        </el-button>
                                        <el-button class="add1_btn" size="small" type=""
                                            @click="add(scope.row.id, scope.row.alias)">添加
                                        </el-button>
                                    </template>
                                </el-table-column>
                                <template v-slot:empty>
                                    <el-empty description="暂无数据"></el-empty>
                                </template>
                            </el-table>
                            <el-config-provider :locale="locale">
                                <el-pagination :total="total" :page-size="limit"
                                    :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
                                    layout="total, sizes, prev, pager, next, jumper" @size-change="changePageSize"
                                    @current-change="changeCurrentPage">
                                </el-pagination>
                            </el-config-provider>
                        </el-tab-pane>
                        <el-tab-pane :label="campusName1" :name="2">
                            <div class="app-search">
                                <el-form :inline="true" class="demo-form-inline" v-model="form">
                                    <el-form-item label="楼宇">
                                        <el-select v-model="value" class="m-2" placeholder="请选择楼宇" @change="selectLou"
                                            style="width: 192px;">
                                            <el-option v-for="item in storeyList" :key="item.id" :label="item.alias"
                                                :value="item.id" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="房间号">
                                        <el-input placeholder="请输入地点名称" v-model="form.name"
                                            @keyup.enter="searchEnter"></el-input>
                                    </el-form-item>
                                    <el-form-item label="地点名称">
                                        <el-input placeholder="请输入别名" v-model="form.alias"
                                            @keyup.enter="searchEnter"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button class="serach_btn" type="primary" @click="onSubmit"
                                            @keyup.enter="searchEnter">搜索</el-button>
                                        <el-button class="add_btn" type="success" @click="add">添加</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <el-table :data="list" style="width: 100%" :row-class-name="tableRowClassName">
                                <el-table-column prop="parentName" label="楼宇" />
                                <el-table-column prop="name" label="房间号" />
                                <el-table-column prop="alias" label="地点名称" />
                                <el-table-column label="操作" width="240px">
                                    <template style="display: block" #default="scope">
                                        <el-button class="edit_btn" size="small" type="success"
                                            @click="editBaseAddress(scope.row)">编辑
                                        </el-button>
                                        <el-button class="del_btn" size="small" type="danger"
                                            @click="deleteBaseAddress(scope.row.id)">删除
                                        </el-button>
                                        <el-button class="add1_btn" size="small" type=""
                                            @click="add(scope.row.id, scope.row.alias)">添加
                                        </el-button>
                                    </template>
                                </el-table-column>
                                <template v-slot:empty>
                                    <el-empty description="暂无数据"></el-empty>
                                </template>
                            </el-table>
                            <el-config-provider :locale="locale">
                                <el-pagination :total="total" :page-size="limit"
                                    :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
                                    layout="total, sizes, prev, pager, next, jumper" @size-change="changePageSize"
                                    @current-change="changeCurrentPage">
                                </el-pagination>
                            </el-config-provider>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <bottomView />
            </div>
        </div>
    </el-main>
</template>
<script>
import addEditBaseAddressView from "@/components/assets/addEditBaseAddress.vue";
import addFileView from "@/components/addExcelFile.vue";
import { ElConfigProvider, ElMessageBox, ElMessage, ElLoading } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { Picture as IconPicture, Upload } from "@element-plus/icons-vue";
import bottomView from "@/components/bottom.vue";
import { API_BASE_NAME, API_BASE_NAME3, API_BASE_NAME2 } from '../../constants';

export default {
    name: "BaseAddressListView",
    data() {
        return {
            campusName: API_BASE_NAME2,
            campusName1: API_BASE_NAME3,
            type: 0,
            title: "",
            page: 0,
            pageSize: 10,
            total: 0,
            limit: 10,
            id: '',
            list: [],
            storeyList: [],
            form: {
                code: "",
                name: "",
                alias: "",
                detail: "",
                parentName: "",
                parentId: '',
                campus: "",
            },
            user: {},
        };
    },
    components: {
        addEditBaseAddressView,
        addFileView,
        IconPicture,
        ElConfigProvider,
        ElMessageBox,
        ElMessage, Upload, bottomView
    },
    setup() {
        return {
            locale: zhCn,
        };
    },
    mounted() {
        this.user = JSON.parse(sessionStorage.getItem("user"))
        this.form.campus = this.user.campus
        this.getBaseAddressList();
        this.getStoreyList()
    },
    watch: {
        $route() {
            this.getBaseAddressList();
        },
    },
    methods: {
        searchEnter: function (e) {
            console.log(e);
            // 使用 which 和 keyCode 属性来解决兼容问题
            var keyCode = window.event ? e.keyCode : e.which;
            var val = e.target.value;
            if (keyCode == 13 && val) {
                this.getBaseAddressList();
            }
        },
        selectLou(value) {
            console.log(value);
            this.id = value
            // this.getBaseAddressList(value)
        },
        importHandle(value) {
            console.log(value);
            this.id = value
            // this.getBaseAddressList(value)
        },
        exporthandle(value) {
            httpService("/javaApi/baseAddress/exportExcel", {}, "get").then(
                (data) => {
                    window.open(data.message, "_blank");
                    // if (data.code == 200) {
                    //     ElMessage.success("导出成功");
                    //     // this.getFaProjectList()
                    //     window.open('http192.168.9.20' + data.message, "_blank")
                    // } else {
                    //     ElMessage.error("导出失败");
                    // }
                }
            );
        },

        handleChange(e) {
            var loadingInstance = ElLoading.service({
                lock: true, text: '加载中', background: 'rgba(0, 0, 0, 0.7)',
            });
            const file = e.raw;
            let params = new FormData()
            params.append('file', file)
            httpService("/javaApi/baseAddress/importExcel", params, "post").then(
                (data) => {
                    loadingInstance.close()
                    if (data.code == 200) {
                        ElMessage.success("导入成功");
                        this.getFaProjectList()
                    } else {
                        ElMessage.error("导入失败");
                    }
                }
            );
            console.log(file);
        },
        add(id, pName) {
            this.$refs.addEditBaseAddressView.title = "添加地点"
            this.$refs.addEditBaseAddressView.personnelType = this.type
            this.$refs.addEditBaseAddressView.dialogFormVisible = true;
            this.$refs.addEditBaseAddressView.id = id;
            this.$refs.addEditBaseAddressView.pName = pName;
            this.$refs.addEditBaseAddressView.user = this.user;
        },
        editBaseAddress(obj) {
            this.$refs.addEditBaseAddressView.title = "修改信息"
            this.$refs.addEditBaseAddressView.getBaseAddressById(obj.id);
            this.$refs.addEditBaseAddressView.dialogFormVisible = true;
            this.$refs.addEditBaseAddressView.user = this.user;
        },
        deleteBaseAddress(id) {
            ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    httpService("/javaApi/baseAddress/deleteById", "id=" + id, "post").then(
                        (data) => {
                            if (data.code == 200) {
                                ElMessage.success("删除成功");
                                this.getBaseAddressList();
                            } else {
                                ElMessage.error("删除失败，请重试！");
                            }
                        }
                    );
                })
                .catch(() => {
                });
        },
        reloadData() {
            this.page = 1;
            this.getBaseAddressList()
        },
        importExcel() {
            this.$refs.addFileView.dialogFormVisible = true;
            this.$refs.addFileView.title = "批量导入地点表";
            this.$refs.addFileView.uploadApiUrl = "/javaApi/baseAddress/importExcel";
        },
        exportExcel() {
            httpService(
                "/javaApi/baseAddress/exportExcel",
                {
                    "code": this.form.code,
                    "name": this.form.name,
                    "alias": this.form.alias,
                    "detail": this.form.detail,
                    "parentName": this.form.parentName,
                },
                "get"
            ).then((data) => {
                if (data.code == 200) {
                    // window.open(`http://192.168.9.20:8088/javaApi` +data.message, '_blank')
                    // window.open(`https://wx.zhengzhong.cn` +data.msg, '_blank')
                    window.open(data.msg, '_blank')
                }
            });
        },
        onSubmit() {
            console.log();
            this.getBaseAddressList();
        },
        // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
        changePageSize(size) {
            this.pageSize = size;
            this.limit = size;
            this.getBaseAddressList();
        },

        // 改变页码，page：回调参数，表示当前选中的“页码”
        changeCurrentPage(page) {
            this.page = page;
            this.getBaseAddressList();
        },
        tableRowClassName({ row, rowIndex }) {
            return "";
        },
        changeCampus(value) {
            this.form.campus = value
            this.getBaseAddressList()
        },
        getBaseAddressList(id) {
            if (id == undefined) {
                id = ''
            } else {
                id = id
            }
            httpService(
                "/javaApi/baseAddress/list/" + this.page + "/" + this.pageSize,
                {
                    // "code": this.form.code,
                    // "detail": this.form.detail,
                    // "parentName": this.form.parentName,
                    "name": this.form.name,
                    "alias": this.form.alias,
                    'parentId': this.form.parentId ? this.form.parentId :"",
                    campus: this.form.campus,
                },
                "get"
            ).then((data) => {
                // this.list = data.list.reverse();
                this.list = data.list
                this.storeyList = data.list.filter(item => item.parentName == API_BASE_NAME)
                this.total = data.total;
                this.pageCount = data.pages;
                // this.list = this.list.filter(item => item.parentId != 13 && item.id != 13)
            });
        },
        getStoreyList() {

            httpService(
                "/javaApi/baseAddress/list/" + this.page + "/" + 100,
                {
                    // "parentName": API_BASE_NAME,
                    "parentId": 34,
                },
                "get"
            ).then((data) => {
                this.storeyList = data.list
                console.log("楼宇", data);
            });
        },
    }
};
</script>
<style scoped>
.el-main {
    padding: 0px;
}

.teacher-content {
    width: 100%;
}

.app-table {
    background: #eff3f5;
    padding: 10px;
}

.app-search {
    border-top: 1px solid #fff;
}

.app-separator {
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
}

.app-body {
    background: white;
    /* padding: 20px 20px 10px 20px; */
    /* padding: 20px 20px 10px 20px; */
    margin-bottom: 10px;
    min-height: calc(100vh - 214px);
}

.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-lighter);
}

.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-lighter);
}

.el-pagination {
    text-align: center;
    margin-top: 10px;
}

.el-form {
    padding: 0px 10px 0;
    background-color: #fff;
}

.serach_btn {
    background-color: #007EFF;
    color: #fff;
    border-radius: 8px;
    border: none;
}

.add_btn {
    background-color: #00c78c;
    color: #fff;
    border-radius: 8px;
    border: none;
}

.export_btn {
    background-color: #FF7200;
    border-radius: 8px;
    color: #fff;
    border: none;
}

.import_btn {
    border-radius: 8px;
}

.edit_btn {
    background-color: #fff;
    color: #007EFF;
    border: none;
}

.del_btn {
    background-color: #fff;
    color: #FF0000;
    border: none;
}

.add1_btn {
    background-color: #fff;
    color: #00c78c;
    border: none;
}

/* .demo-tabs {
    background-color: #fff;
} */
.el-tab-pane {
    padding: 0 10px;
}
</style>
